import React, { useRef } from 'react';
import './index.css';
import Model from '../';
import { formateDateTime } from '../../../libs/util';

function EditorkModel(props) {
    const { isShowEditorModel, data, submitEditorData } = props,
        inputRef = useRef(),
        checkRef = useRef();
    const formatNewData = () => {
        const val = inputRef.current.value.trim(),
            valLen = val.length;

        if (valLen === 0) {
            inputRef.current.value = data.content;
            return;
        }
        const newData = {
            id: new Date().getTime(),
            content: val,
            completed: checkRef.current.checked
        }
        submitEditorData(newData, data.id);
    }
    return (
        <Model
            isModelShow={isShowEditorModel}
            modelTitle='编辑事件'
        >
            <p className="topic">时间：{ formateDateTime(data.id) }</p>
            <p className="topic">
                内容：<textarea
                    ref={inputRef}
                    defaultValue={data.content}
                    className="textarea"
                >
                </textarea>
            </p>
            <p className="topic">状态：
                <input
                    type="checkbox"
                    defaultChecked={data.completed ? true : false}
                    ref={checkRef}
                />
            </p>
            <button
                className="button is-success my-close-btn"
                onClick={formatNewData}
            >提交</button>
        </Model>
    );
}

export default EditorkModel;